import { CSSRuleObject, styled } from "styledfc";
import { FlexCss } from "../utils/styledfc";
import collect from "@/assets/images/collect.png";
import { PetCardType } from "@/pages/Index/components/HotList";
import { useNavigate } from "react-router-dom";
interface PetCardProps {
    item: PetCardType;
    changeCollect: (id: number) => void;
}
export default function PetCard(props: PetCardProps) {
    const navigate = useNavigate();
    const { item, changeCollect } = props;
    const handelClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        e.stopPropagation();
        changeCollect(item.id);
    };
    return (
        <li
            className={petCardStyle.className}
            onClick={() => {
                navigate("/details/" + item.id);
            }}
        >
            <div className="pet__card-img">
                <img src={item.img} />
            </div>
            <div className="pet__card-content">
                <div className="content__title">{item.name}</div>
                <div className="content__desc">{item.englishName}</div>
                <div className="content__desc">{item.life}</div>
            </div>
            <div className="item-right">
                <div className={`changeCol ${item.collect && "active"}`} onClick={(e) => handelClick(e)}>
                    <img src={collect} />
                </div>
            </div>
        </li>
    );
}
const petCardStyle = styled({
    width: "333rem",
    height: "96rem",
    borderRadius: "17rem",
    backgroundColor: "white",
    marginBottom: "20rem",
    ...(FlexCss("center") as CSSRuleObject),
    ".pet__card-img": {
        marginLeft: "4rem",
        width: "88rem",
        height: "88rem",
        backgroundColor: "lightblue",
        borderRadius: "17rem",
        overflow: "hidden",
        ">img": {
            width: "100%",
            height: "100%",
            objectFit: "cover",
        },
    },
    ".pet__card-content": {
        height: "70rem",
        width: "150rem",
        marginLeft: "20rem",
        marginTop: "8rem",

        ".content__title": {
            fontSize: "18rem",
            color: "#333",
        },

        ".content__desc": {
            marginTop: "8rem",
            fontSize: "14rem",
            color: "gray",
            lineHeight: "14rem",

            "&:last-child": {
                marginTop: "2rem",
            },
        },
    },
    ".item-right": {
        height: "88rem",
        width: "30rem",
        marginLeft: "20rem",
        display: "flex",
        alignItems: "flex-end",
        justifyContent: "flex-end",
        marginBottom: "20rem",

        ".changeCol": {
            width: "22rem",
            height: "22rem",
            backgroundColor: "#ECEBEB",
            borderRadius: " 50%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            transition: ".3s",

            "&:where(.active)": {
                backgroundColor: "#ffd967",
                boxShadow: "0 2rem 6rem #ffd967",
            },

            "> img": {
                width: "11rem",
                height: "11rem",
            },
        },
    },
});
